<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
    <!-- 导入vue包 -->
    <script src="./lib/vue2.6.10.js"></script>
    <style>
        .div1{
            width: 300px;
            height: 200px;
            background-color: #999;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>.stop 阻止事件冒泡 </h3>
        <div class="div1" @click="divHandler">
            <input type="button" value="按 钮" @click.stop="btuHandler" />
        </div>
        <hr>
        <h3>.prevent 阻止默认行为</h3>
        <a href="http://www.baidu.com" @click.prevent="linkClick">去 百度</a>
        <hr>
        <h3>.capture 事件捕获机制</h3>
        <div class="div1" @click.capture="divHandler">
                <input type="button" value="按 钮" @click="btuHandler" />
            </div>
        <hr>
        <h3>.self 仅捕获自己触发的事件</h3>
        <div class="div1" @click.self="divHandler">
                <input type="button" value="按 钮" @click="btuHandler" />
            </div>
        <hr>
        <h3>.one 事件仅触发一次</h3>
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">去 百度</a>
        <hr>
        
    </div>


    <script>
        // 创建一个vue实例
        var vm = new Vue({
            el:'#app', // 当前new的这个vue实例要控制的DOM
            data:{     // 所有的数据
                msg: "hello"
            },
            methods: {
                divHandler(){
                    console.log('divHander');
                },
                btuHandler(){
                    console.log('butHander');
                },
                linkClick(){
                    alert('gogogo')
                }
            },
        })

    </script>
</body>
</html>